var gulp = require('gulp')
var sass = require('gulp-sass')
const autoprefixer = require('gulp-autoprefixer')
sass.compiler = require('node-sass')
var connect = require('gulp-connect') //引入gulp-connect模块  监听
var open = require('open')
const rootPath = './'

const scss = function () {
	return gulp
		.src('./sass/**/*.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(
			autoprefixer({
				cascade: false,
				overrideBrowserslist: ['last 10 versions'],
			})
		)
		.pipe(gulp.dest('./css'))
}

const htmlWatch = () => {
	return gulp.src(rootPath + '*.html').pipe(connect.reload())
}

const cssWatch = () => {
	return gulp.src(rootPath + 'css/*.css').pipe(connect.reload())
}
gulp.watch(rootPath + '*.html', htmlWatch)
gulp.watch(rootPath + 'css/*.css', cssWatch)
gulp.watch(rootPath + 'sass/*.scss', scss)

exports.default = () => {
	connect.server({
		root: rootPath,
		livereload: true,
		port: 8080,
	})
	open('http://localhost:8080/')
}
